{% macro header(current_section) %}
<header
	class=" sticky top-0 z-50 w-full border-border/40 backdrop-blur bg-background">
	<div class="container relative flex h-14 md:grid md:grid-cols-[240px_minmax(0,1fr)]">
		<div class="mr-4 hidden sm:flex">
			<a class="flex mr-4  items-center space-x-2" href="/">
				<img src="/icon.svg" width="30px" />
			</a>
			<nav class="flex w-full bg-transparent items-center gap-4 text-sm">
				{% if lang == config.default_language %}
				{% set rootsectionpath = "_index.md" %}
				{% else %}
				{% set rootsectionpath = "_index." ~ lang ~ ".md" %}
				{% endif %}
				{% set mainsec = get_section(path=rootsectionpath) %}
				{% if mainsec.extra.menu.main %}
				{% for val in config.extra.menu.main %}
				<a class="nav-link text-black dark:text-white {% if current_section == val.section %} active{% endif %}" href="{{ get_url(path=val.url, trailing_slash=true) | safe }}">{{
					val.name
					}}
				</a>
				{% endfor %}
				{% elif config.extra.menu.main %}
				{% for val in config.extra.menu.main %}
				<a class="nav-link text-black {% if current_section == val.section %} active{% endif %}" href="{{ get_url(path=val.url, trailing_slash=true) | safe }}">{{
					val.name
					}}
				</a>
				{% endfor %}
				{% else %}
	
				{% endif %}
			</nav>
		</div>

		<div class="flex items-center sm:hidden">
				<button onclick="toggleMenu()"
					class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-9 py-2 mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
					type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:R15u6ja:" data-state="closed">
					<svg stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
						<path d="M3 5H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
						</path>
						<path d="M3 12H16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
						</path>
						<path d="M3 19H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
						</path>
					</svg>
					<span class="sr-only">Toggle Menu</span>
				</button>

				<div class="absolute mt-[106px] left-0 right-0">
						<nav id="menu-toggle" class="flex hidden bg-background  items-center gap-4 text-sm py-[15px] px-2 w-full">
							<a class="flex items-center" href="/">
								<img src="/icon.svg" width="30px" />
							</a>
							{% if lang == config.default_language %}
							{% set rootsectionpath = "_index.md" %}
							{% else %}
							{% set rootsectionpath = "_index." ~ lang ~ ".md" %}
							{% endif %}
							{% set mainsec = get_section(path=rootsectionpath) %}
							{% if mainsec.extra.menu.main %}
							{% for val in config.extra.menu.main %}
							<a class="nav-link text-black dark:text-white {% if current_section == val.section %} active{% endif %}" href="{{ get_url(path=val.url, trailing_slash=true) | safe }}">{{
								val.name
								}}
							</a>
							{% endfor %}
							{% elif config.extra.menu.main %}
							{% for val in config.extra.menu.main %}
							<a class="nav-link text-black {% if current_section == val.section %} active{% endif %}" href="{{ get_url(path=val.url, trailing_slash=true) | safe }}">{{
								val.name
								}}
							</a>
							{% endfor %}
							{% else %}
				
							{% endif %}
						</nav>
		</div>
		</div>

		<div class="flex flex-1 items-center justify-between space-x-2">
		
			{% if config.build_search_index %}
			<div class="flex-1 lg:flex lg:justify-end">
				<form class="navbar-form flex-grow-1 order-7 order-md-3">
					<input id="userinput"
						class="placeholder-black dark:placeholder-white bg-transparent   inline-flex items-center whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground px-4 py-2 relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal shadow-none sm:pr-12 lg:max-w-64"
						type="search" placeholder="Search docs..." aria-label="Search docs..." autocomplete="off">
		
					<div id="suggestions" class="shadow  rounded"></div>
				</form>
			</div>
			{% endif %}
		
		
		
			<nav class="flex items-center">
				<button id="mode" class="btn btn-link order-2 order-md-4" type="button" aria-label="Toggle mode">
					<span class="toggle-dark hidden"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
							fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="feather feather-moon">
							<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
						</svg></span>
					<span class="toggle-light"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
							fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="feather feather-sun">
							<circle cx="12" cy="12" r="5"></circle>
							<line x1="12" y1="1" x2="12" y2="3"></line>
							<line x1="12" y1="21" x2="12" y2="23"></line>
							<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
							<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
							<line x1="1" y1="12" x2="3" y2="12"></line>
							<line x1="21" y1="12" x2="23" y2="12"></line>
							<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
							<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
						</svg></span>
				</button>
				{% if config.extra.menu.social %}
				{% for val in config.extra.menu.social %}
				<div
					class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground py-2 h-8 w-8 px-0">
					<a class="nav-link" href="{{ val.url | safe }}">{{ val.pre | safe }}<span class="sr-only">{{
							val.name}}</span></a>
				</div>
				{% endfor %}
				{% else %}
				{% endif %}
			</nav>
		</div>
	</div>
</header>
<!-- JavaScript to toggle menu visibility -->
<script>
	function toggleMenu() {
		var menu = document.getElementById('menu-toggle');
		menu.classList.toggle('hidden');
	}
</script>
{% endmacro %}
